<template>
  <div class="header base-section">
    <div class="header-title">{{$t('dataAnalysis.statisticalTime')}}</div>

    <!-- 时间选择框 left -->
    <div class="header-time">
      <el-select
        v-model="dateValue"
        @change="setDateRange(dateValue)"
        style="width:100px;height: 15px;"
        size="mini"
      >
        <el-option
          v-for="item in dateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <!-- /时间选择框 left -->

    <!-- 时间选择框 right -->
    <div class="header-time-wrapper">
      <span class="title-time" v-if="dateValue === 4">{{this.nowDate}}</span>
      <button
        v-if="dateValue === 4"
        data-v-3baf97fc
        class="el-button el-button--text el-button--small"
        @click="flushDateTime"
        type="button"
      >{{$t('dataAnalysis.refresh')}}
      </button>
      <span
        class="title-time"
        v-if="dateValue === 5 || dateValue === 6"
      >{{this.dateRange[0]}} - {{this.dateRange[1]}}</span>
    </div>
    <div class="title-picker">
      <el-date-picker
        size="mini"
        style="width: 150px;"
        v-if="dateValue === 1 "
        v-model="dateRange[0]"
        type="date"
        :placeholder="$t('dataAnalysis.selectDate')"
        :picker-options="PickerOptions"
      ></el-date-picker>
    </div>

    <div class="title-picker">

    </div>

    <div class="title-picker">
      <el-date-picker
        size="mini"
        style="width: 150px;"
        v-if="dateValue === 3 "
        v-model="preMonth"
        type="month"
        :placeholder="$t('dataAnalysis.selectMonth')"
        :picker-options="monthPickerOptions"
      ></el-date-picker>
    </div>
    <div class="title-picker">
      <el-date-picker
        size="mini"
        style="width: 230px;"
        v-if="dateValue === 2 "
        v-model="weekRange"
        type="week"
        :picker-options="weekPickerOptions"
        :format="this.weekRangeFormat"
        :placeholder="$t('dataAnalysis.selectWeek')">
      </el-date-picker>
    </div>
    <!-- /时间选择框 right -->
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        dateValue: 5,             // 时间选择状态
        data: {
          onSale: 0, // 在架商品数
          visitedProd: 0, // 被访问商品数
          dynamicSale: 0, // 动销商品数
          expose: 0, // 商品曝光数
          browse: 0, // 商品浏览量
          visitor: 0, // 商品访客数
          addCart: 0, // 加购件数
          orderNum: 0, // 下单件数
          payNum: 0 // 支付件数
        },
        dateRange: [],
        nowDate: null,
        preMonth: '',
        monthPickerOptions: {
          disabledDate (time) {
            let month1 = moment().startOf('month')
            return (
              time.getTime() > month1.valueOf()
            )
          }
        },
        PickerOptions: {
          disabledDate (time) {
            let date = moment().add(0, 'days').startOf('days')
            return (
              time.getTime() >= date.valueOf()
            )
          }
        },
        weekPickerOptions: {
          disabledDate (time) {
            let month1 = moment().add(-1, 'week').endOf('week')
            return (
              time.getTime() > month1.valueOf()
            )
          }
        },
        dateOptions: [
          {
            label: this.$i18n.t('dataAnalysis.naturalDay'),
            value: 1
          },
          {
            label: this.$i18n.t('dataAnalysis.naturalWeek'),
            value: 2
          },
          {
            label: this.$i18n.t('dataAnalysis.naturalMonth'),
            value: 3
          },
          {
            label: this.$i18n.t('dataAnalysis.todayRealTime'),
            value: 4
          },
          {
            label: this.$i18n.t('dataAnalysis.nearly7'),
            value: 5
          },
          {
            label: this.$i18n.t('dataAnalysis.nearly30'),
            value: 6
          }
        ],
        weekRange: '',
        weekRangeFormat: ''
      }
    },
    watch: {
      dateRange: {
        handler (newValue, oldValue) {
          this.$parent.timeType = this.dateValue
          // 转成时间戳格式
          this.$parent.startTime = moment(this.dateRange[0]).unix() * 1000
        },
        deep: true,
        immediate: true
      },
      weekRange (newVal) {
        var d = moment(newVal).startOf('week')
        this.dateRange = []
        this.dateRange.push(newVal)
        this.weekRangeFormat = 'yyyy-MM-dd - ' + moment(d).endOf('week').format('L')
      },
      preMonth (newVal) {
        var d = moment(newVal).startOf('month')
        this.dateRange = []
        this.dateRange.push(d)
      }
    },
    methods: {
      /**
       * 刷新时间
       */
      flushDateTime () {
        var date = new Date()
        this.nowDate = moment(date).format('LL')
        this.dateRange = []
        this.dateRange.push(date)
      },
      /**
       * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月(前一个月如当前月为7月，自然月为6月)
       * 改：// 1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天
       */
      setDateRange (val) {
        var startDay = null
        var endDay = null
        this.dateValue = val
        if (val === 4) {
          startDay = 1
          endDay = 1
          this.flushDateTime()
          return
        } else if (val === 5) {
          startDay = -7
          endDay = -1
        } else if (val === 6) {
          startDay = -31
          endDay = -1
        } else if (val === 1) {
          startDay = -1
          endDay = -1
        } else if (val === 3) {
          this.preMonth = this.getPreMonth()
          return
        } else if (val === 2) {
          this.weekRange = moment(moment().add(-1, 'week')).startOf('week')
          return
        } else {
          return
        }
        // 开始时间
        var startTime = moment().add(startDay, 'days').format('L')
        // 结束时间
        var endTime = moment().add(endDay, 'days').format('L')
        this.dateRange = [startTime, endTime]
      },
      /**
       * 获取前一个月的时间
       */
      getPreMonth () {
        var obj = moment(moment().add(-1, 'month')).startOf('month')
        this.dateRange = []
        this.dateRange.push(obj)
        return obj
      }
    },
    mounted () {
      // 初始化自然日
      this.setDateRange(5)
    }
  }
</script>

<style lang="scss">
  .header {
  }

  .header-title {
    display: inline-block;
  }

  .header-time {
    display: inline-block;
  }

  // 栏目标题行
  .title-line {
    background: #f8f8f8;
    padding: 12px;
    font-size: 12px;
    line-height: 1em;
    display: flex;
  }

  .title-text-info {
    background: #f8f8f8;
  }

  .title-left {
    text-align: left;
    display: inline;
    margin-top: 0.5em;
    width: 80%;
  }

  .title-right {
    text-align: right;
    display: inline;
    width: 20%;
  }

  .header-time-wrapper {
    display: inline;
  }

  .title-picker {
    display: inline;
  }

  .blue-vertical {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #155bd4;
    margin-right: 0.5em;
    vertical-align: middle;
  }

  .title-txt {
    color: #000;
    font-weight: normal;
    margin-right: 1em;
    vertical-align: middle;
  }

  .title-time {
    color: #999999;
    vertical-align: middle;
    vertical-align: middle;
  }

  .realtime {
    display: flex;
    margin-top: 40px;
    margin-left: 20px;
    padding: 0;
  }
</style>

